import React, { Component } from 'react';
import './index.css';
import Header from '../Header';
import List from '../List';
import Footer from '../Footer';
export default class TodoList extends Component {
  state = {
    todos: [
      { id: '001', name: '洗脸', done: true },
      { id: '002', name: '刷牙', done: true },
      { id: '003', name: '吃饭', done: false },
      { id: '004', name: '出门', done: false }
    ]
  };

  // 添加数组
  addTodo = todoObj => {
    const { todos } = this.state;
    this.setState({ todos: [todoObj, ...todos] });
  };

  // 更新数组勾选状态
  updateTodo = (id, done) => {
    const { todos } = this.state;
    const newTodos = todos.map(todo => {
      if (todo.id === id) {
        return { ...todo, done };
      } else {
        return todo;
      }
    });
    this.setState({ todos: newTodos });
  };

  // 删除单个数组
  delTodo = id => {
    const { todos } = this.state;
    const newTodos = todos.filter(todo => {
      return todo.id !== id;
    });
    this.setState({ todos: newTodos });
  };

  // 改变全部勾选状态
  checkAllTodo = done => {
    const { todos } = this.state;
    const newTodos = todos.map(todo => {
      return { ...todo, done };
    });
    this.setState({ todos: newTodos });
  };

  // 删除已完成
  clearAllDone = () => {
    const { todos } = this.state;
    const newTodos = todos.filter(todo => {
      return !todo.done;
    });
    this.setState({ todos: newTodos });
  };

  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <Header addTodo={this.addTodo}></Header>
        <List todos={todos} updateTodo={this.updateTodo} delTodo={this.delTodo}></List>
        <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone} ></Footer>
      </div>
    );
  }
}
